import AddressIcon from "@/components/icons/AddressIcon";
import PhoneIcon from "@/components/icons/PhoneIcon";
import LogisticsItem from "../LogisticsItem";
import classes from "./index.module.css";
import Image from "next/image";
function FoodTruckLogistics(props) {
  const { cnn, address, image, imageAlt } = props;

  const addressText = address?.replace(", ", "\n");

  return (
    <section className={classes.logistics}>
      <div className={classes.image}>
        <Image src={`/${image}`} alt={imageAlt} width={400} height={400} />
      </div>
      <ul className={classes.list}>
        <LogisticsItem icon={PhoneIcon}>
          <time>{cnn}</time>
        </LogisticsItem>
        <LogisticsItem icon={AddressIcon}>
          <span>{addressText}</span>
        </LogisticsItem>
      </ul>
    </section>
  );
}

export default FoodTruckLogistics;
